<template>
  <div>
        <el-upload
            class="avatar-uploader"
            :action="apiUrl"
            :show-file-list="false"
            :headers="headers"
            :data="{
              uploadFileTypeEnum:'PPT'
            }"
            :on-progress="loadingProgress"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <i  v-if="fileUrl" style="color:#30ab74" class="el-icon-folder-opened avatar-uploader-icon"></i>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
                      {{textFile}}

        <el-progress v-if="percentage>0" :percentage="percentage"></el-progress>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { getUrl } from '@/utils/request'
  export default {
    props:{
     value:{
       type:[String,Number],
       default(){
         return ''
       }
     },
     text:{
       type:[String,Number],
       default(){
         return ''
       }
     },
    },
    data() {
      return {
        headers:{
            "Authorization":getToken()
        },
         apiUrl:'/api/oss-fileupload/upload',
       // apiUrl:window.location.href.split('master')[0]+'/api/files/upload',
        fileUrl:'',
        percentage:0,
        textFile:'',
      };
    },
    watch:{
       value(){
          if(this.value){
            this.fileUrl = this.value
          }
       },
       text(){
        if(this.text){
            this.textFile = this.text
          }
       }
    },
    mounted(){
      if(this.text){
            this.textFile = this.text
          }
          if(this.value){
            this.fileUrl = this.value
          }
    },
    methods: {
      loadingProgress(res,file){
        console.log(res?.percent)
        if(res?.percent>0){
         this.percentage=Number(Number(res.percent).toFixed(0))
        }
     },
     
     handleAvatarSuccess(res, file) {
      console.log(file.response.fileDigestSha1,'---------')
         if(file.response.success){
               this.$message.success('上传成功!');
               this.fileUrl = URL.createObjectURL(file.raw);
               this.$emit('success',file.response.url)
               this.textFile =file.response.originalFilename //Math.round(new Date().getTime()/1000).toString()+'.'+file.response.fileExt
               this.$emit('input',file.response.url)
              this.$emit('getDataInfo',{
                fileSize:file.response.fileSize,
                name:file.response.originalFilename,
                localPath:file.response.uploadSavePath,
                previewUrl:file.response.previewUrl,
                fileDigestSha1:file.response.fileDigestSha1,
              })
               this.percentage=0
         }else{
             this.$message.error(file.response.message||'请上传正确的文件格式');
         }
      },
      beforeAvatarUpload(file) {
        // if(file.type==''){
        //   if(file.name.indexOf('.rar')>-1|| file.name.indexOf('.zip')>-1){
        //        const isLt2M = file.size / 1024 / 1024 < 200;
        //      if (!isLt2M) {
        //          this.$message.error('文件大小不能超过 100MB!');
        //         return false
        //     }else{
        //        return true
        //     }   
        //   }else{
        //      this.$message.error('文件格式只能是 JPG、PNG、PDF,ZIP,RAR格式!');
        //     return false
        //   }
        // }else{
        //     // const isJPG = (file.type == 'image/jpeg'||
        //     // file.type =='image/png'
        //     // ||file.type =='application/pdf' 
        //     // || file.type=='application/x-zip-compressed'
        //     // || file.type=='application/vnd.openxmlformats-officedocument.presentationml.presentation'
        //     // );
        //     // if (!isJPG) {
        //     //  this.$message.error('文件格式只能是 JPG、PNG、PDF,XLS,PPTX,DOC,DOCX格式!');
        //     // }

        //     const isLt2M = file.size / 1024 / 1024 < 200;
     
        //     if (!isLt2M) {
        //       this.$message.error('文件大小不能超过 200MB!');
        //     }
        //     return  isLt2M;
        // }
        return true
      }
    }
  }
</script>
<style scoped>
.avatar-uploader{
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 38px;
    height: 38px; 
}
 .avatar-uploader .el-upload {
    border: 1px dashed #ddd;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
        width: 38px;
    height: 38px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 18px;
    color: #8c939d;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
  }
  .avatar {
    width: 38px;
    height: 38px;
    display: block;
  }
</style>